<template>
  <view :class="['classify', { iphonex: isIphoneX }]">
    <Tab
      v-if="!loading"
      fixed
      :tab-data="tabs"
      :active-index.sync="tabIndex"
      @tab-click="handleSwitchTab"
    />
    <!-- 分类数据 -->
    <navigator
      v-for="(book, index) in formatLists"
      :key="book._id"
      :url="book._id ? `/pages/bookdetail/index?id=${book._id}` : ''"
      :class="{ classify__item: true, opacity: !book }"
      hover-class="none"
    >
      <skeleton title animate :row="3" :loading="loading">
        <view class="classify__item-info">
          <view class="classify__name">{{ book.name }}</view>
          <view class="classify__des">{{ book.des }}</view>
          <view class="classify__bottom">
            <text>{{ book.author }}</text>
          </view>
        </view>
        <LazyLoadImg
          class="classify__img"
          :index="index"
          threshold="0"
          width="75"
          height="109"
          img-mode="aspectFit"
          :image="book.img_url"
        />
      </skeleton>
    </navigator>
    <!-- 数据为空 -->
    <NoData
      v-if="!loading && total === 0"
      text="这里空空如也，查看别的类别吧~"
      comp-style="margin-top: 120rpx"
      show-btn
      btn-text="查看全部书籍"
      @btn-click="handleSwitchAllTab"
    />
    <!-- 正在加载更多 -->
    <view v-if="hasMore && loadingMore" class="classify__load-more">
      <LoadingInline text="更多书籍正在加载中..." color="#666" :wrap="false" />
    </view>
    <!-- 已经没有更多了 -->
    <view v-if="total > 0 && !hasMore" class="classify__no-more">
      已经到底了~
    </view>
    <!-- 返回顶部 -->
    <div v-if="showBackTop" class="classify__backtop">
      <text class="iconfont icon-backtotop" @click="goBackTop" />
    </div>
  </view>
</template>

<script>
import Tab from '@/components/Tab';
import LazyLoadImg from '@/components/LazyLoadImg2';
import LoadingInline from '@/components/LoadingInline';
import NoData from '@/components/NoData';
import { get } from '@/utils';
import { platformName } from '@/config';
import { mapGetters } from 'vuex';

export default {
  components: {
    Tab,
    LazyLoadImg,
    LoadingInline,
    NoData,
  },

  data() {
    return {
      loading: false,
      loadingMore: false,
      tabIndex: 0,
      page: 1,
      total: 0,
      list: [],
      hasSrollBottom: false,
      tabs: ['全部书籍'],
      showBackTop: false,
    };
  },

  computed: {
    ...mapGetters(['isIphoneX', 'settings']),
    formatLists() {
      if (this.loading) return [{}, {}];
      return this.list;
    },

    hasMore() {
      return this.total > this.page * 8;
    },

    isOpenHideMode() {
      return (
        get(this.settings, 'is_open_hide_mode', false) &&
        platformName === 'mp-weixin'
      );
    },
  },

  onLoad(options) {
    if (options.index) {
      this.tabIndex = Number(options.index);
    }
    this.fetchBooks({
      page: this.page,
      index: this.tabIndex,
      init: true,
    });
  },

  onReachBottom() {
    this.page = this.page + 1;
    this.loadingMore = true;
    this.fetchBooks({
      page: this.page,
      index: this.tabIndex,
      init: false,
    }).then(() => {
      this.loadingMore = false;
      this.showBackTop = true;
    });
  },

  methods: {
    fetchBooks({ page = 1, index = 0, init = false }) {
      if (init) {
        this.page = 1;
        page = 1;
        this.loading = true;
        this.showBackTop = false;
      }
      return this.$http({
        method: 'GET',
        url: '/api/front/book/classify',
        data: {
          classify: this.tabs[index],
          page,
        },
        errorText: '获取书籍分类数据失败',
      }).then((res) => {
        if (this.isOpenHideMode) {
          this.loading = false;
          this.list = [];
          this.total = 0;
          return;
        }
        const { total = 0, list = [], classify } = res.data;
        this.total = total;
        if (init) {
          this.list = list;
          this.loading = false;
          this.tabs = classify.map((item) => {
            if (item === '') return '全部书籍';
            return item;
          });
        } else {
          this.list = [...this.list, ...list];
        }
      });
    },

    reloadData: function () {
      this.fetchBooks({
        page: this.page,
        index: this.tabIndex,
        init: true,
      });
    },

    handleSwitchTab(index) {
      this.fetchBooks({
        index,
        init: true,
      });
    },

    handleSwitchAllTab() {
      this.tabIndex = 0;
      this.fetchBooks({
        index: 0,
        init: true,
      });
    },

    goBackTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
  },
};
</script>

<style lang="scss">
.classify {
  padding-top: 90rpx;

  &.iphonex {
    padding-bottom: 68rpx;
  }

  &__item {
    padding: 28rpx $page-row-spacing;
    overflow: hidden;

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 1px;
      background: $border-color-gray;
      transform: scaleY(0.5);
      content: ' ';
    }

    &-info {
      float: left;
      width: 100%;
      padding-left: 178rpx;
    }
  }

  &__img {
    margin-right: 28rpx;
    width: 150rpx;
    float: left;
    margin-left: -100%;
  }

  &__name {
    color: $font-color-normal;
    font-size: 30rpx;
    line-height: 1.5em;
  }

  &__des {
    color: $font-color-desc;
    font-size: 26rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.4em;
    margin-top: 10rpx;
    margin-bottom: 28rpx;
  }

  &__bottom {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    color: $font-color-desc;
    font-size: 26rpx;
  }

  &__load-more {
    padding: 30rpx 0;
  }

  &__no-more {
    font-size: 24rpx;
    margin-top: 10rpx;
    color: #999;
    text-align: center;
    padding: 30rpx 0;
  }

  &__backtop {
    position: fixed;
    bottom: 60rpx;
    right: 60rpx;
    text-align: center;

    .iconfont {
      font-size: 80rpx;
      display: block;
      margin: 0 auto;
      color: #999;
      padding: 20rpx;

      &:active {
        color: #666;
      }
    }
  }
}
</style>
